<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="dome1"></div>
    <div id="dome2"></div>
    <div id="dome3"></div>
     <!-- 1引入核心 -->
     <script type="text/javascript" src="./js/react.development.js"></script>
     <!-- 2扩展库-->
     <script type="text/javascript" src="./js/react-dom.development.js"></script>
     <!-- 3引入babel，用于将jsx转为js-->
     <script type="text/javascript" src="./js/babel.min.js"></script>
     <!-- 用于对组件标签属性进行限制 -->
     <script type="text/javascript" src="./js/prop-types.js"></script>


     <!-- 一、组件实例的三大核心属性-props-的使用 -->
     <!-- 1.单个props -->
     <!-- <script type="text/babel">
       class FunMain extends React.Component{
           render(){
               const {name,age,gloup} = this.props
               return(
               <ul>
                    <li>你的名字：{name}</li>
                    <li>你的年龄：{age}</li>
                    <li>你的年级：{gloup}</li>
               </ul>
               )
           }
       }
       ReactDOM.render(<FunMain name='小坏蛋' age='51' gloup='高一' />,document.getElementById('dome1'))
       ReactDOM.render(<FunMain name='小王' age='5' gloup='高三' />,document.getElementById('dome2'))
       ReactDOM.render(<FunMain name='小纯' age='1' gloup='大一' />,document.getElementById('dome3'))
    </script> -->


     <!-- 2.批量props传值 -->
     <!-- <script type="text/babel">
       class FunMain extends React.Component{
           render(){
               const {name,age,gloup} = this.props
               return(
               <ul>
                    <li>你的名字：{name}</li>
                    <li>你的年龄：{age}</li>
                    <li>你的年级：{gloup}</li>
               </ul>
               )
           }
       }
       const txt = {name:'小纯',age:'1',gloup:'大一'}

       ReactDOM.render(<FunMain name='小坏蛋' age='51' gloup='高一' />,document.getElementById('dome1'))
       ReactDOM.render(<FunMain name='小王' age='5' gloup='高三' />,document.getElementById('dome2'))
    //    ReactDOM.render(<FunMain name={txt.name} age={txt.age} gloup={txt.gloup} />,document.getElementById('dome3'))
       ReactDOM.render(<FunMain {...txt}/>,document.getElementById('dome3'))

    </script> -->


    <!-- 3.对props进行限制 以及 4.简写方式-->
     <!-- <script type="text/babel">
       class FunMain extends React.Component{
            //对标签属性进行类型、必要性的限制
            static propTypes = {
            //name:React.PropTypes.string//15.xxxx版本有16版本后就弃用了
                name:PropTypes.string.isRequired,//限制name必须传，并且为字符串
                gloup:PropTypes.string,
                speak:PropTypes.func,
                age:PropTypes.number,
                //引入之后全局就会多一个对象PropTypes
            }

            //指定默认标签属性
            static defaultProps = {
                age:15//如果age没有值,默认就显示15
            }

            render(){
               const {name,age,gloup} = this.props
            //props是指读的不能去修改
            //this.props.name = 'jack'
               return(
               <ul>
                    <li>你的名字：{name}</li>
                    <li>你的年龄：{age+1}</li>
                    <li>你的年级：{gloup}</li>
               </ul>
               )
           }

       }

       const txt = {name:'小纯',age:21,gloup:'大一'}

       ReactDOM.render(<FunMain speak={speak} name='坏人' age={2} gloup='高一' />,document.getElementById('dome1'))
       ReactDOM.render(<FunMain name='小王' age={1} gloup='高三' />,document.getElementById('dome2'))
       ReactDOM.render(<FunMain {...txt}/>,document.getElementById('dome3'))


       function speak(){
           console.log('我说话了')
       }
    </script> -->



    <!-- 5函数式组件用法-->
    <!-- <script type="text/babel">
        class FunMain extends React.Component{
            constructor(props){
                console.log(props)
                super(props)

                console.log('constructor',this.props)

            }

             static propTypes = {
                 name:PropTypes.string.isRequired,//限制name必须传，并且为字符串
                 gloup:PropTypes.string,
            
                 age:PropTypes.number,
             }
 
             static defaultProps = {
                 age:15//如果age没有值,默认就显示15
             }
 
             render(){
                const {name,age,gloup} = this.props
                return(
                <ul>
                     <li>你的名字：{name}</li>
                     <li>你的年龄：{age+1}</li>
                     <li>你的年级：{gloup}</li>
                </ul>
                )
            }
 
        }
 
    
        function Person(params) {
            
            const {name,age,sex} = params
            return(
                <ul>
                     <li>你的名字：{name}</li>
                     <li>你的年龄：{age+1}</li>
                     <li>你的性别：{sex}</li>
                </ul>
            )
        

        ReactDOM.render(<Person name='坏人' age={18} sex='男' />,document.getElementById('dome1'))
 
 
        function speak(){
            console.log('我说话了')
        }
     </script> -->





     <!-- 二、组件实例的三大核心属性-ref -->
     <!-- 1.字符串形式的ref-->
     <!-- <script type="text/babel">
         class Refun extends React.Component{
             state = {name:'纯'}
             render(){
                console.log(this)
                 return(
                    <div>
                        <input ref='ipt1'  type="text"/>
                        <button onClick = {this.BtnClick}>点击</button>
                        <input onBlur={this.BtnBlur} ref='ipt2'  type="text"/>
                    </div>
                )
             }

             BtnClick = () =>{
                 const {ipt1} = this.refs
                alert(ipt1.value)
             }

             BtnBlur = () =>{
                const {ipt2} = this.refs
                alert(ipt2.value)
             }
         } 
         ReactDOM.render(<Refun a='1' />,document.getElementById('dome1'))
     </script> -->

     <!-- 2.回调形式的ref-->
     <!-- <script type="text/babel">
         class Refun extends React.Component{
             state = {name:'纯'}

             render(){
                console.log(this)
                 return(
                    <div>
                        {/*<input ref={c=>this.ipt1 = c}  type="text"/>这样写会存在一个问题，但是问题不大*/}
                         <input ref={this.SaveInput}  type="text"/>

                        <button onClick = {this.BtnClick}>点击</button>
                        <input ref={c=>this.ipt2 = c} onBlur={this.BtnBlur} type="text"/>
                    </div>
                )
             }

             SaveInput = (c) =>{
                this.ipt1 = c
                console.log(c)
             }

             BtnClick = (c) =>{
                const {ipt1} = this
                alert(ipt1.value)
             }

             BtnBlur = () =>{
                const {ipt2} = this
                alert(ipt2.value)
             }
         } 
         ReactDOM.render(<Refun a='1' />,document.getElementById('dome1'))
     </script> -->


     <!-- 3.createRef的使用 -->
     <script type="text/babel">
        class Refun extends React.Component{
            state = {name:'纯'}

            /*
            React.createRef();调用后可以返回一个容器，该容器可以存储被ref所标识的节点
            该容器是“专人专用”，只能存一个
            */
            myRef = React.createRef();

            render(){
                return(
                   <div>
                       <input ref={c => this.ipt1 = c}  type="text"/>
                       <input ref={this.myRef}  type="text"/>
                       <button onClick = {this.BtnClick}>点击</button>
                       <input  onBlur={this.BtnBlur} type="text"/>
                   </div>
               )
            }

          

            BtnClick = () =>{
                const {current} = this.myRef
                const {ipt1} = this
               alert(ipt1.value)
            }

            BtnBlur = (event) =>{
                let value = event.target.value
               alert(value)
            }
        } 
        ReactDOM.render(<Refun a='1' />,document.getElementById('dome1'))
    </script>

</body>
</html>